<template>
	<div>
		<header-sub-filter @getFilterParms="getFilterParms"></header-sub-filter>
		<div v-for="(addition,index) in dataList " :key="index" class="user-wrap">
			<one-explain :addition="addition" :flag=1>
			</one-explain>
		</div>
		<div class="demonstration">
				<el-pagination ref="pagination"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="pageSizes"
					:page-size="pageSize"
					:layout="isMobile === true ? 'total, sizes, prev, next, jumper' : 'total, sizes, prev, pager, next, jumper'"
					:total="totalSizes">
				</el-pagination>
		</div>
	</div>
</template>

<script>
	import constant from '../static/constant.json'
	import oneExplain from './oneExplain.vue'
	import headerSubFilter from './headerSubFilter'
	import common from './Common.vue'
	import { _isMobile } from '../js/common.js'
	export default {
	  name: 'Classify',
	  components:{
		  oneExplain: oneExplain,
		  headerSubFilter: headerSubFilter,
	  },
	  props: {
	    title: {
			type: String,
			default: "classify"
		}
	  },
	  data() {
		  return {
				currentPage: 1,
				pageSizes: [2,4,8,16],
				pageSize: 2,
				totalSizes: 0,
				datas:[],
				dataList: [],
				isMobile: false
		  }
	  },
	  methods:{
		  changeFirstSub(value){
		  	this.ruleForm.SecondSubject = ''
		  	this.SecondSubList = this.SecondSubLists[value]
		  },
		  getFilterParms(first,second,isall){
			  // 词库分类
			  this.$axios
			  	.post('api/all',{
				isall: isall,
			  	FirstSubject: first,  // 只会存在 第一第二学科都为空、 第一不为空第二为空 、都不为空3种情况   
			  	SecondSubject: second
			  })
			  	.then(successRespond => {
			  		this.datas = successRespond.data
			  		this.getList()
			  		this.totalSizes=this.dataList.length
			  	})
			  	.catch(failRespond => {
			  	})
		  },
		  handleSizeChange(val) {
		  	console.log(`每页 ${val} 条`);
		  	this.$refs.pagination.handleCurrentChange();
		  	this.currentPage = this.$refs.pagination.currentPage;
		  	this.pageSize = val;
		  	this.getList();
		  	},
		  handleCurrentChange(val) {
		  	console.log(`当前页: ${val}`);
		  	this.currentPage = val;
		  	this.getList();
		  	},
		  getList() {
		  	this.dataList = this.datas.slice((this.currentPage-1)*(this.pageSize),(this.currentPage-1)*(this.pageSize)+this.pageSize);
		  },
		  // 用于测试 实际应该用 getFilterParms 里面接口
		  getdata() {
		  	this.$axios.post("api/getwordadditions", {
		  		word: '' //通过关键词来查找符合这个词的回答
		  	})
		  	.then(response=> {
		  			this.datas=response.data;
		  			this.totalSizes=response.data.length;
					this.getList()
		  			}
		  	)
		  	.catch(e=> {
		  	})
		  }
	  },
	  mounted() {
		// 测试
	  	this.getdata()
		// 实际
		// this.getFilterParms('','',true)
		this.isMobile = _isMobile()
	  }
	}
</script>
	
<style scoped lang="less">
	.firstcol {
		line-height: 40px;
	}
	.el-row {
	    margin-bottom: 20px;
	    &:last-child {
	      margin-bottom: 0;
	    }
	  }
	  .el-col {
	    border-radius: 4px;
	  }
	  .bg-purple-dark {
	    background: #99a9bf;
	  }
	  .bg-purple {
	    background: #d3dce6;
	  }
	  .bg-purple-light {
	    background: #e5e9f2;
	  }
	  .grid-content {
	    border-radius: 4px;
	    min-height: 36px;
		line-height: 100%;
	  }
	  .row-bg {
	    padding: 10px 0;
	    background-color: #f9fafc;
	  }
</style>
